/* 颜色变量 */
:root {
  --primary-color: #409EFF;
  --secondary-color: #67C23A;
  --success-color: #67C23A;
  --warning-color: #E6A23C;
  --danger-color: #F56C6C;
  --info-color: #909399;
  
  --text-color: #303133;
  --text-color-light: #606266;
  --text-color-lighter: #909399;
  
  --border-color: #DCDFE6;
  --border-color-light: #E4E7ED;
  --border-color-lighter: #EBEEF5;
  
  --bg-color: #F5F7FA;
  --bg-color-light: #FAFAFA;
  
  --card-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/* 基础样式重置 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text-color);
  background-color: var(--bg-color);
  line-height: 1.6;
}

#app {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

a {
  text-decoration: none;
  color: var(--primary-color);
}

ul, ol {
  list-style: none;
}

/* 通用布局类 */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.flex-wrap {
  flex-wrap: wrap;
}

.gap-sm {
  gap: 8px;
}

.gap-md {
  gap: 16px;
}

.gap-lg {
  gap: 24px;
}

/* 间距工具类 */
.mt-sm { margin-top: 8px; }
.mt-md { margin-top: 16px; }
.mt-lg { margin-top: 24px; }
.mt-xl { margin-top: 32px; }

.mb-sm { margin-bottom: 8px; }
.mb-md { margin-bottom: 16px; }
.mb-lg { margin-bottom: 24px; }
.mb-xl { margin-bottom: 32px; }

.ml-sm { margin-left: 8px; }
.ml-md { margin-left: 16px; }
.ml-lg { margin-left: 24px; }
.ml-xl { margin-left: 32px; }

.mr-sm { margin-right: 8px; }
.mr-md { margin-right: 16px; }
.mr-lg { margin-right: 24px; }
.mr-xl { margin-right: 32px; }

.p-sm { padding: 8px; }
.p-md { padding: 16px; }
.p-lg { padding: 24px; }
.p-xl { padding: 32px; }

/* 文本工具类 */
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-primary {
  color: var(--primary-color);
}

.text-success {
  color: var(--success-color);
}

.text-warning {
  color: var(--warning-color);
}

.text-danger {
  color: var(--danger-color);
}

.text-info {
  color: var(--info-color);
}

/* 响应式工具类 */
@media (max-width: 768px) {
  .hide-sm {
    display: none;
  }
}

@media (max-width: 992px) {
  .hide-md {
    display: none;
  }
}

/* 动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.slide-up-enter-active,
.slide-up-leave-active {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.slide-up-enter-from,
.slide-up-leave-to {
  transform: translateY(20px);
  opacity: 0;
}
